
//获取最大的容器
const container=document.querySelector('#my-slider')
//获取每一张图片节点数组
const items=document.querySelectorAll('.slider-list__item,.slider-list__item--selected')
//控制点节点数组
const controls=document.querySelectorAll('.slide-list__control-buttons--selected,.slide-list__control-buttons')
//上一个按钮
const prev=document.querySelector('.slide-list__previous')
//下一个按钮
const next=document.querySelector('.slide-list__next')
//控制的容器
const controlContainer=document.querySelector('.slide-list__control')
//控制索引
let currentIDx=0
//定时器的ID
let timer=null

//切换的时间ms
const delay=2000
//开始一个定时器
function start(){
    timer=setInterval(slideNext,delay)
}
//清除定时器
function stop(){
    clearInterval(timer)
}
//下一张
function slideNext(){
    console.log('下一个')
    currentIDx=(currentIDx+1)%items.length
    slide()
}
//上一张
function slidePrev(){
    //console.log('上一个')
    const len=items.length
    currentIDx=(len+currentIDx-1)%len
    slide()
}
//切换函数
function slide(){
    //console.log(currentIDx)
    //当前的元素隐藏
    document.querySelector('.slider-list__item--selected').className='slider-list__item'

    //将要切换的元素显示
    items[currentIDx].className='slider-list__item--selected'

    //轮播图指示切换
    const control=document.querySelector('.slide-list__control-buttons--selected')
    control.className='slide-list__control-buttons'
    controls[currentIDx].className='slide-list__control-buttons--selected'
}
function controlHander(event){
    //console.log('over',event.target)

    //Array.from将伪数组转换成真正的数组 然后可以调用数组的indexof返回元素在数组里的索引
   const idx= Array.from(controls).indexOf(event.target)
   console.log(idx)

   //未找到 返回idx===-1
   if(idx>=0){ //找到元素的下标了
    currentIDx=idx
    slide()
   }
}

//mouseover是鼠标经过的事件
controlContainer.addEventListener('mouseover',controlHander)

//添加click 点击事件监听器
prev.addEventListener('click',slidePrev)
next.addEventListener('click',slideNext)

start()

//鼠标进入事件处理
container.addEventListener('mouseenter',function(event){
    //阻止事件冒泡
    event.stopPropagation()

    console.log('enter')
    //停止自动切换
    stop()
})

container.addEventListener('mouseleave',function(){
    console.log('leave')
    //开始自动切换
    start()
})